<template>
  <view class="container">
    <view class="order-info">
      <view class="order-info-item" style="border-bottom: 1px solid #eee;">
        <text class="title">订单编号</text>
        <text>{{ orderDeatil.orderNo }}</text>
      </view>
      <view class="order-info-item" style="margin-bottom: 20rpx;">
        <text class="title">支付金额</text>
        <uv-text :text="orderDeatil.goodsPrice" mode="price" color="#ff7700" size="32rpx"
          style="justify-content: flex-end;"></uv-text>
      </view>
    </view>
    <view class="payment-methods">
      <text class="payment-methods-item-title" style="border-bottom: 1px solid #eee;">在线支付</text>
      <uv-radio-group v-model="payMethodVal" placement="column" iconPlacement="right">
        <uv-radio class="payment-methods-item" v-for="(item, index) in paymethods" :name="item.value" :key="index"
          activeColor="#ff7744">
          <template #default>
            <view style="display: flex;margin-bottom: 10rpx;">
              <uv-text :text="item.name" :prefixIcon="item.icon"
                :iconStyle="{ 'font-size': '42rpx', color: item.color }"></uv-text>
              <uv-text :text="'可用余额：' + balance" v-if="item.value === 'wallet'"></uv-text>
            </view>
          </template>
        </uv-radio>
      </uv-radio-group>
    </view>
    <view class="confirm-payment">
      <uv-button color="#ff7744" @click="confirmPayment" text="确认支付"></uv-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { toast } from '@/utils/common'
import { buyerOrderDeatil, payOrder } from '@/api/order'
import { getBalance } from "@/api/wallet";
import type { Order } from '@/api/order/type'
// 订单金额
const orderDeatil = ref<Order>({})
const paymethods = ref([
  { name: '微信支付', value: 'wechat', icon: "weixin-circle-fill", color: "#08c265" },
  { name: '支付宝', value: 'alipay', icon: "zhifubao-circle-fill", color: "#40a9ff" },
  { name: '余额支付', value: 'wallet', icon: "folder", color: "#0ee59d" }
])
const payMethodVal = ref('balance')
const balance = ref<string>('0.00')

const loadOrderDetail = async (orderNo: string) => {
  try {
    const res = await buyerOrderDeatil(orderNo)
    if (res.data.payStatus === 1) {
      toast('该订单已支付')
      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/order/detail?orderNo=' + orderNo
        })
      }, 1000)
      return
    }
    orderDeatil.value = res.data
  } catch (error) {
    toast(error.tips)
    setTimeout(() => {
      uni.reLaunch({
        url: '/pages/index/index'
      })
    }, 1000)
  }
}

const loadBalance = async () => {
  const res = await getBalance();
  balance.value = res.data.balance;
}

onLoad((options: any) => {
  loadOrderDetail(options.orderNo)
  loadBalance()
})

// 确认支付
const confirmPayment = async () => {
  try {
    const res = await payOrder({
      orderNo: orderDeatil.value.orderNo,
      payMethod: payMethodVal.value
    })
    toast(res.data)
    uni.navigateTo({
      url: '/pages/pay/res?orderNo=' + orderDeatil.value.orderNo + '&type=goods'
    })
  } catch (error) {
    toast(error.tips)
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding-top: 20rpx;
}

.order-info {
  background-color: #fff;

  .order-info-item {
    display: flex;
    padding: 0 20rpx;
    height: 90rpx;
    justify-content: space-between;
    align-items: center;
  }

  ::v-deep .uv-text {
    justify-content: flex-end !important;
  }
}

.payment-methods {
  background-color: #fff;
  display: flex;
  flex-direction: column;

  .payment-methods-item-title {
    height: 70rpx;
    display: flex;
    padding: 0 20rpx;
    align-items: center;
  }

  .payment-methods-item {
    display: flex;
    padding: 0 20rpx;
    height: 100rpx;
    justify-content: space-between;
    align-items: center;
  }
}

.confirm-payment {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 999;
}
</style>